<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>甲状腺癌术后TSH抑制治疗评估</title>
    <style>
        :root {
            --primary: #2c7fb8;
            --secondary: #7fcdbb;
            --accent: #edf8b1;
            --text: #253238;
            --light: #f8f9fa;
            --danger: #e74c3c;
            --warning: #f39c12;
            --success: #2ecc71;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: var(--text);
            line-height: 1.6;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        
        h1 {
            font-size: 1.8rem;
            margin-bottom: 10px;
        }
        
        .progress-bar {
            height: 8px;
            background-color: #e0e0e0;
            border-radius: 4px;
            margin: 20px 0;
            overflow: hidden;
        }
        
        .progress {
            height: 100%;
            background-color: var(--primary);
            width: 0%;
            transition: width 0.3s ease;
        }
        
        .form-section {
            background-color: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            margin-bottom: 20px;
            display: none;
        }
        
        .form-section.active {
            display: block;
            animation: fadeIn 0.5s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        h2 {
            color: var(--primary);
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
        }
        
        input, select {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
            transition: border 0.3s;
        }
        
        input:focus, select:focus {
            border-color: var(--primary);
            outline: none;
        }
        
        .checkbox-group {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .checkbox-item {
            flex: 1 1 200px;
            display: flex;
            align-items: center;
        }
        
        .checkbox-item input {
            width: auto;
            margin-right: 8px;
        }
        
        .btn-group {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
        }
        
        button {
            padding: 12px 25px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .btn-prev {
            background-color: #e0e0e0;
            color: var(--text);
        }
        
        .btn-next, .btn-submit {
            background-color: var(--primary);
            color: white;
        }
        
        .btn-prev:hover {
            background-color: #d0d0d0;
        }
        
        .btn-next:hover, .btn-submit:hover {
            background-color: #1a6ca0;
        }
        
        .result-section {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            text-align: center;
            display: none;
        }
        
        .risk-level {
            font-size: 24px;
            font-weight: bold;
            padding: 15px;
            border-radius: 8px;
            margin: 20px 0;
        }
        
        .low-risk {
            background-color: rgba(46, 204, 113, 0.2);
            color: var(--success);
            border: 2px solid var(--success);
        }
        
        .intermediate-risk {
            background-color: rgba(243, 156, 18, 0.2);
            color: var(--warning);
            border: 2px solid var(--warning);
        }
        
        .high-risk {
            background-color: rgba(231, 76, 60, 0.2);
            color: var(--danger);
            border: 2px solid var(--danger);
        }
        
        .tsh-range {
            font-size: 22px;
            font-weight: bold;
            color: var(--primary);
            margin: 20px 0;
        }
        
        .recommendation {
            text-align: left;
            background-color: var(--accent);
            padding: 20px;
            border-radius: 8px;
            margin-top: 20px;
        }
        
        .footer-note {
            margin-top: 30px;
            font-size: 14px;
            color: #777;
            border-top: 1px solid #eee;
            padding-top: 15px;
        }
        
        @media (max-width: 600px) {
            .container {
                padding: 10px;
            }
            
            .form-section, .result-section {
                padding: 15px;
            }
            
            h1 {
                font-size: 1.5rem;
            }
            
            .checkbox-group {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>甲状腺癌术后TSH抑制治疗评估</h1>
            <p>请根据您的实际情况填写以下信息</p>
        </header>
        
        <div class="progress-bar">
            <div class="progress" id="progress"></div>
        </div>
        
        <!-- 基本信息部分 -->
        <section id="section1" class="form-section active">
            <h2>基本信息</h2>
            <div class="form-group">
                <label for="age">年龄</label>
                <input type="number" id="age" min="0" max="120" required>
            </div>
            <div class="form-group">
                <label for="gender">性别</label>
                <select id="gender" required>
                    <option value="">请选择</option>
                    <option value="male">男</option>
                    <option value="female">女</option>
                </select>
            </div>
            <div class="form-group">
                <label for="surgery-date">手术日期</label>
                <input type="date" id="surgery-date" required>
            </div>
            <div class="btn-group">
                <div></div> <!-- 占位 -->
                <button class="btn-next" onclick="showSection(2)">下一步</button>
            </div>
        </section>
        
        <!-- 病理信息部分 -->
        <section id="section2" class="form-section">
            <h2>病理信息</h2>
            <div class="form-group">
                <label for="tumor-size">肿瘤最大直径 (cm)</label>
                <input type="number" id="tumor-size" step="0.1" min="0" required>
            </div>
            <div class="form-group">
                <label for="histologic-type">组织学类型</label>
                <select id="histologic-type" required>
                    <option value="">请选择</option>
                    <option value="PTC">乳头状癌 (PTC)</option>
                    <option value="FTC">滤泡状癌 (FTC)</option>
                    <option value="MTC">髓样癌 (MTC)</option>
                    <option value="ATC">未分化癌 (ATC)</option>
                </select>
            </div>
            <div class="form-group">
                <label>甲状腺外侵犯</label>
                <div class="checkbox-group">
                    <div class="checkbox-item">
                        <input type="radio" id="extrathyroidal-no" name="extrathyroidal" value="no" required>
                        <label for="extrathyroidal-no">无</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="radio" id="extrathyroidal-minor" name="extrathyroidal" value="minor">
                        <label for="extrathyroidal-minor">轻微</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="radio" id="extrathyroidal-major" name="extrathyroidal" value="major">
                        <label for="extrathyroidal-major">广泛</label>
                    </div>
                </div>
            </div>
            <div class="btn-group">
                <button class="btn-prev" onclick="showSection(1)">上一步</button>
                <button class="btn-next" onclick="showSection(3)">下一步</button>
            </div>
        </section>
        
        <!-- 转移情况部分 -->
        <section id="section3" class="form-section">
            <h2>转移情况</h2>
            <div class="form-group">
                <label>淋巴结转移</label>
                <div class="checkbox-group">
                    <div class="checkbox-item">
                        <input type="radio" id="lymph-node-no" name="lymph-node" value="no" required>
                        <label for="lymph-node-no">无</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="radio" id="lymph-node-micro" name="lymph-node" value="micro">
                        <label for="lymph-node-micro">微小转移 (≤5个，最大直径&lt;2mm)</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="radio" id="lymph-node-macro" name="lymph-node" value="macro">
                        <label for="lymph-node-macro">大体积转移 (≥1个，直径&gt;2mm)</label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label>远处转移</label>
                <div class="checkbox-group">
                    <div class="checkbox-item">
                        <input type="radio" id="distant-metastasis-no" name="distant-metastasis" value="no" required>
                        <label for="distant-metastasis-no">无</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="radio" id="distant-metastasis-yes" name="distant-metastasis" value="yes">
                        <label for="distant-metastasis-yes">有</label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label>手术切除情况</label>
                <div class="checkbox-group">
                    <div class="checkbox-item">
                        <input type="radio" id="resection-complete" name="resection" value="complete" required>
                        <label for="resection-complete">完全切除</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="radio" id="resection-incomplete" name="resection" value="incomplete">
                        <label for="resection-incomplete">不完全切除</label>
                    </div>
                </div>
            </div>
            <div class="btn-group">
                <button class="btn-prev" onclick="showSection(2)">上一步</button>
                <button class="btn-submit" onclick="calculateRisk()">评估风险</button>
            </div>
        </section>
        
        <!-- 结果部分 -->
        <section id="result-section" class="result-section">
            <h2>风险评估结果</h2>
            <div id="risk-level" class="risk-level">低风险</div>
            <p>基于您提供的信息，您的风险分层为：<strong id="risk-text">低风险</strong></p>
            <div class="tsh-range">TSH控制目标：<span id="tsh-target">0.5-2.0 mU/L</span></div>
            <div class="recommendation">
                <h3>治疗建议：</h3>
                <p id="recommendation-text">对于低风险患者，TSH应控制在0.5-2.0 mU/L范围内。建议定期复查甲状腺功能，根据实际情况调整左甲状腺素剂量。</p>
            </div>
            <div class="footer-note">
                <p><strong>重要提示：</strong>此评估结果仅供参考，不能替代专业医生的诊断和治疗建议。请务必咨询您的主治医生，根据您的具体情况制定个性化治疗方案。</p>
            </div>
            <button class="btn-prev" onclick="resetForm()" style="margin-top: 20px;">重新评估</button>
        </section>
    </div>

    <script>
        let currentSection = 1;
        const totalSections = 3;
        
        function showSection(sectionNumber) {
            // 验证当前部分是否已填写
            if (!validateSection(currentSection)) {
                alert("请填写完整信息后再继续");
                return;
            }
            
            // 隐藏当前部分
            document.getElementById(`section${currentSection}`).classList.remove('active');
            
            // 显示目标部分
            document.getElementById(`section${sectionNumber}`).classList.add('active');
            
            // 更新当前部分
            currentSection = sectionNumber;
            
            // 更新进度条
            updateProgressBar();
        }
        
        function validateSection(sectionNumber) {
            const section = document.getElementById(`section${sectionNumber}`);
            const inputs = section.querySelectorAll('input[required], select[required]');
            
            for (let input of inputs) {
                if (!input.value) {
                    return false;
                }
                
                // 对于单选按钮组，检查是否至少有一个被选中
                if (input.type === 'radio') {
                    const name = input.name;
                    const radioGroup = document.getElementsByName(name);
                    let checked = false;
                    for (let radio of radioGroup) {
                        if (radio.checked) {
                            checked = true;
                            break;
                        }
                    }
                    if (!checked) return false;
                }
            }
            
            return true;
        }
        
        function updateProgressBar() {
            const progress = (currentSection / totalSections) * 100;
            document.getElementById('progress').style.width = `${progress}%`;
        }
        
        function calculateRisk() {
            // 验证最后一部分
            if (!validateSection(currentSection)) {
                alert("请填写完整信息后再提交");
                return;
            }
            
            // 收集表单数据
            const formData = {
                age: parseInt(document.getElementById('age').value),
                gender: document.getElementById('gender').value,
                tumorSize: parseFloat(document.getElementById('tumor-size').value),
                histologicType: document.getElementById('histologic-type').value,
                extrathyroidal: document.querySelector('input[name="extrathyroidal"]:checked').value,
                lymphNode: document.querySelector('input[name="lymph-node"]:checked').value,
                distantMetastasis: document.querySelector('input[name="distant-metastasis"]:checked').value,
                resection: document.querySelector('input[name="resection"]:checked').value
            };
            
            // 根据ATA指南进行风险分层
            let riskLevel = 'low';
            let riskText = '低风险';
            let tshTarget = '0.5-2.0 mU/L';
            let recommendation = '对于低风险患者，TSH应控制在0.5-2.0 mU/L范围内。建议定期复查甲状腺功能，根据实际情况调整左甲状腺素剂量。';
            
            // 高风险条件
            if (formData.distantMetastasis === 'yes' || 
                formData.resection === 'incomplete' ||
                formData.extrathyroidal === 'major' ||
                formData.histologicType === 'ATC' ||
                (formData.lymphNode === 'macro' && formData.tumorSize > 4) ||
                (formData.histologicType === 'FTC' && formData.tumorSize > 4)) {
                
                riskLevel = 'high';
                riskText = '高风险';
                tshTarget = '<0.1 mU/L';
                recommendation = '对于高风险患者，TSH应抑制在0.1 mU/L以下。需要密切监测甲状腺功能和疾病状态，定期进行影像学检查。';
            } 
            // 中风险条件
            else if (formData.extrathyroidal === 'minor' ||
                     formData.lymphNode === 'macro' ||
                     (formData.tumorSize > 1 && formData.tumorSize <= 4) ||
                     (formData.histologicType === 'FTC' && formData.tumorSize <= 4) ||
                     formData.histologicType === 'MTC') {
                
                riskLevel = 'intermediate';
                riskText = '中风险';
                tshTarget = '0.1-0.5 mU/L';
                recommendation = '对于中风险患者，TSH应控制在0.1-0.5 mU/L范围内。建议定期监测甲状腺功能和疾病状态，根据情况调整治疗方案。';
            }
            
            // 显示结果
            document.getElementById('risk-level').className = `risk-level ${riskLevel}-risk`;
            document.getElementById('risk-level').textContent = riskText;
            document.getElementById('risk-text').textContent = riskText;
            document.getElementById('tsh-target').textContent = tshTarget;
            document.getElementById('recommendation-text').textContent = recommendation;
            
            // 隐藏表单，显示结果
            document.getElementById(`section${currentSection}`).classList.remove('active');
            document.getElementById('result-section').style.display = 'block';
        }
        
        function resetForm() {
            // 重置表单
            document.querySelectorAll('input, select').forEach(element => {
                if (element.type === 'radio' || element.type === 'checkbox') {
                    element.checked = false;
                } else {
                    element.value = '';
                }
            });
            
            // 重置进度
            currentSection = 1;
            updateProgressBar();
            
            // 隐藏结果，显示第一页
            document.getElementById('result-section').style.display = 'none';
            document.getElementById('section1').classList.add('active');
        }
        
        // 初始化进度条
        updateProgressBar();
    </script>
</body>
</html>